<script setup lang='ts'>
import dayjs from 'dayjs'

defineOptions({ name: 'VipRebateRecord' })

const today = dayjs()
const { isLogin } = storeToRefs(useAppStore())

const dayOptions = [
  { label: $t('today'), value: '0' },
  { label: $t('last_days_mid', { delta: 7 }), value: '6' },
  { label: $t('last_days_mid', { delta: 30 }), value: '29' },
  { label: $t('last_days_mid', { delta: 90 }), value: '89' },
]
const columns = reactive<Column[]>([
  {
    title: $t('label_draw_time'),
    dataIndex: 'created_at',
    slot: 'created_at',
    align: 'center',
    width: '50%',
  },
  {
    title: $t('receive_bonus_amount'),
    dataIndex: 'receive_amount',
    slot: 'receive_amount',
    align: 'center',
    width: '50%',
  },
])
const dayType = ref('0')
const page = ref(1)
const page_size = ref(10)
const total = ref(0)

const params = computed(() => ({
  page: page.value,
  page_size: page_size.value,
  start_time: today.subtract(+dayType.value, 'day').startOf('day').unix(),
  end_time: today.endOf('day').unix(),
  cash_type: '814',
}))

const { loading, data, runAsync: runAsyncGetRecordAsync, run } = useRequest(ApiMemberVipBonusRecord, {
  onSuccess(res) {
    if (page.value === 1 && res.d && res.d.length > 0 && res.t)
      total.value = res.t
  },
})
const records = computed(() => {
  if (data.value && data.value.d && data.value.d.length > 0)
    return data.value.d
  return []
})

function changeDayType(item: string) {
  dayType.value = item
  reset()
  getData()
}
function onPrevious() {
  page.value = page.value - 1
  getData()
}
function onNext() {
  page.value = page.value + 1
  getData()
}
function getData() {
  run(params.value)
}
function reset() {
  page.value = 1
  total.value = 0
}

onMounted(() => {
  console.log('🚸🚸🚸 ~ onMounted ~ 返水记录页面挂载了:')
})

if (isLogin.value)
  application.allSettled([runAsyncGetRecordAsync(params.value)])
</script>

<template>
  <div>
    <div class="p-4">
      <BaseBcTab v-model:active-tab="dayType" :tabs="dayOptions" :is-gap="true" class="mb-2" @change="changeDayType" />
      <BaseTable
        :loading="loading" :columns="columns" :data-source="records" show-out-load
        :out-load-height="218"
        class="rounded-md record-table"
        style="color:var(--color-text-white-2);font-size: 0.75rem;"
      >
        <template #created_at="{ record }">
          {{ timeToCustomizeFormat(record.created_at, 'YYYY/MM/DD HH:mm:ss') }}
        </template>
        <template #receive_amount="{ record }">
          <div class="center">
            <AppAmount
              show-color
              :amount="record.receive_amount"
              :currency-type="getCurrencyConfigByCode(record.receive_currency_id).name"
            />
          </div>
        </template>
      </BaseTable>
      <div v-if="total > page_size" class="mb-14 mt-24">
        <AppStack :pagination-data="{ page, pageSize: page_size, total }" @previous="onPrevious" @next="onNext" />
      </div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  .record-table{
    --tg-table-td-padding-y: 0;
    --tg-table-td-padding-x: 0;
    --tg-table-th-padding-x: 0;
    --tg-app-amount-font-size: 0.75rem;
    --bc-amount-currency-size: 1rem;
  }
</style>
